<template>
  <div id="login_box">
    <div class="head clearfix">
        <span :class="!isShow? 'active':''" style="margin-right:20px; font-size:18px;" @click="isShow = false">用户登录</span>
        <span :class="isShow ? 'active':''" @click="isShow = true" style="font-size:18px;">管理员登录</span>
        <span class="close right" @click="closeForm"><i class="iconfont icon-quxiao"></i></span>
    </div>
    <form action="#" class="login1" v-show="!isShow">
        <div id="input_box">
            <input type="text" name="username" placeholder="请输入用户名" v-model="form.username">
        </div>
        <div id="input_box">
            <input type="password" name="password" placeholder="请输入密码" v-model="form.password">
        </div>
        <div id="input_box" style="margin-top: 20px;">
            <span href="#" class="reg" @click="handleReg">没有账号，立即注册</span>
        </div>
        <input type="button" class="button login-btn" @click="login" value="登录"/>
    </form>

    <form action="#" class="login1" v-show="isShow">
        <div id="input_box">
            <input type="text" v-model="adminForm.username" name="username" autocomplete placeholder="请输入用户名">
        </div>
        <div id="input_box">
            <input type="password" v-model="adminForm.password" name="password" placeholder="请输入密码">
        </div>
        <input type="button" class="button login-btn" @click="adminLogin" value="登录" />
    </form>
  </div>
</template>

<script>
import {AdminLogin, Login,UserInfo} from '../request/api'
import {mapActions, mapMutations,mapState} from 'vuex'
export default {
  data(){
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.regForm.checkPass !== '') {
            this.$refs.regForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    return{
        isShow:false,
        form:{
          username:'',
          password:''
        },
        adminForm:{
          username:'',
          password:''
        },
        regForm: {
          name:'',
          pass: '',
          checkPass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
    }
  },
  computed:{
    ...mapState({
      isLogin:state=>state.loginStatus.isLogined,
      userInfo:state=>state.userInfo.userInfo,
      userDetail:state=>state.userInfo.userDetail,
      showReg:state => state.registerStatus.showReg,
    }),
  },
  methods:{
    ...mapMutations({
      changeIsLogined:'loginStatus/changeIsLogined',
      setUserInfo:'userInfo/setUserInfo',
      setUserDetail:'userInfo/setUserDetail',
      setCount:'topbarStatus/setCount',
      setReg:'registerStatus/setReg',
      setAdminLogined:'adminLoginStatus/setAdminLogined',
    }),
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    // 登陆操作
    async login(){
      let res = await Login(this.form)
      // console.log("~~!",res.data)
      // 登陆成功
      if(res.data.state == 200){
        // 隐藏登陆表单
        this.$emit('transmit',false)
        // 保存登录信息
        sessionStorage.setItem('user',JSON.stringify(res.data.data))
        sessionStorage.setItem('userid',JSON.stringify(res.data.data.userid))
        this.setUserInfo(res.data.data)
        // 修改登陆状态
        this.changeIsLogined(true)
        // 提示登陆成功
        this.asyncChangeIsShowToast({
          msg:'登录成功',
          type:'success'
        })
        // 保存用户详情
        this.getUserDetails()
        this.setCount(1)
      }else{
        // 隐藏登陆表单
        this.$emit('transmit',false)
        // 提示登陆失败
        this.asyncChangeIsShowToast({
          msg:res.data.message,
          type:'error'
        })
        // 清空表单
        this.form.username = ''
        this.form.password = ''
      }
      
    },
    // 查询用户详细信息
    async getUserDetails(){
        let res = await UserInfo()
        console.log("查询用户详细信息",res)
        if(res.data.state == 200){
            // 查询成功
            this.setUserDetail(res.data.data)
        }else{
            // 查询失败
            // 提示查询详细信息失败
            this.asyncChangeIsShowToast({
            msg:res.data.message,
            type:'error'
            })
        }
    },
    // 关闭login表单
    closeForm(){
      this.$emit('transmit',false)
    },
    handleReg(){
      // 隐藏登录
      this.$emit('transmit',false)
      // 显示注册页
      this.setReg(true)
    },
    async adminLogin(){
      let res = await AdminLogin(this.adminForm)
      if(res.data.state == 200){
        // 登录成功
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'登录成功'
        })
        this.setAdminLogined(true)
        this.$bus.$emit("adminLogin",true)
        sessionStorage.setItem("user",res.data.data)
        // 跳转路由
        this.$router.push('/admin/home')
      }
      // 隐藏登录
      this.$emit('transmit',false)
    }
  }
}
</script>

<style scoped>
.close{
  font-size: 26px;
}

.login-btn{
  cursor: pointer;
}
body {
      /* background: url('/images/ocean-3605547_1280.jpg') no-repeat; */
      background-size: 100% 130%;
    }

    #login_box {
      width: 35%;
      height: 400px;
      background-color: #112d4e;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 20px;
    }
.reg{
  height: 20px;
  margin-top: 10px;
  color: white;
  font-size: 16px;
}
.reg:hover{
  cursor: pointer;
  color: rebeccapurple;
}
    .button,button {
      margin-top: 50px;
      width: 30%;
      height: 40px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #0b9fcc);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
    .active{
        color: red;
    }
</style>
